<template>
  <el-container class="base-info">
    <div class="base-info-content">
      <el-form ref="landInfo" :rules="editLandInfoRules" :model="landInfo" class="demo-form-inline">
        <box-header title="地块的基础信息"></box-header>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="地块名称" prop="landName">
              <el-input style="width:221px" v-model="landInfo.landName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地块负责人">
              <el-select size="medium" v-model="landInfo.chargePerson" placeholder="请选择">
                <el-option v-for="(x,y) in chargePerson" :key="'person'+y" :label="x" :value="x"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="栽培方式">
              <el-select size="medium" v-model="landInfo.cultivate" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地形地势">
              <el-select size="medium" v-model="landInfo.terrain" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="土壤质地">
              <el-select size="medium" v-model="landInfo.soilTexture" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <box-header title="地块作物信息"></box-header>
        <el-row>
          <el-col :span="12">
            <el-form-item label="种植种类">
              <el-select size="medium" v-model="landInfo.plantingSpecies" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植品种" prop="plantSpecies">
              <el-select size="medium" v-model="landInfo.plantType" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="技术标准">
              <el-select size="medium" v-model="landInfo.technicalStandard" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作物定植时间">
              <el-date-picker v-model="landInfo.plantTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="种植密度-行距">
              <el-input style="width:221px" v-model="landInfo.rowSpacing"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植密度-株距">
              <el-input style="width:221px" v-model="landInfo.plantSpacing"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预计产期">
              <el-date-picker v-model="landInfo.perinatalTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计产量">
              <el-input style="width:221px" v-model="landInfo.perinatalCount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <box-header title="土壤监测结果"></box-header>
        <el-table></el-table>
        <el-form-item>
          <el-button size="medium" type="default" @click="$emit('toggleChange',true)">取消</el-button>
          <el-button size="medium" type="primary" @click="saveLandInfo('landInfo')">保存</el-button>
        </el-form-item>
      </el-form>
      <el-col :span="12"></el-col>
    </div>
  </el-container>
</template>

<script>
import BoxHeader from "@/components/boxHeader";
import { chargePerson,cropBreed } from '@/services/editLandInfo'
export default {
  components: {
    BoxHeader
  },
  data() {
    return {
      landInfo: {
        landName: "",
        chargePerson: "",
        cultivate: "",
        terrain: "",
        soilTexture:"",
        plantingSpecies:"",
        plantType:"",
        technicalStandard:"",
        plantTime:"",
        rowSpacing:0,
        plantSpacing:0,
        perinatalTime:0,
        perinatalCount:0
      },
      chargePerson:[],
      editLandInfoRules:{
        landName:[
          {required:true,message:'请输入地块名',targer:'blur'}
        ],
        plantSpecies:[
          {required:true,message:'请选择种植品种',targer:'blur'}
        ]
      }
    };
  },
  methods:{
    saveLandInfo(formName){
      console.log(this.landInfo)
      console.log(formName)
      console.log(this.$refs.landInfo)
    }
  },
  mounted(){
    Promise.all([chargePerson(),cropBreed()]).then(res=>{
      console.log(res.data)
    })
    // 地块负责人
  //   this.$http({
  //     url:'/farmland/mock/chargePerson'
  //   }).then(res=>{
  //     if(res.code === 1) this.chargePerson=res.lists
  //   })
  //   // 
  //    this.$http({
  //     url:'/farmland/mock/cropBreed'
  //   }).then(res=>{
  //     if(res.code === 1) this.chargePerson=res.lists
  //   })
  }
}
</script>

<style scoped>  
.base-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  padding: 20px;
  overflow: auto;
}
.base-info-content {
  background: #132e40;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
</style>